<template>
    <div class="subDiv" >这是子模块的地盘了<br>
        <h1>情况四：监视【reactive】定义的【对象类型】数据</h1>
        <h2>姓名：{{ person.name }}</h2>
        <h2>年龄：{{ person.age }}</h2>
        <h2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2>
        <button @click="changeName">修改姓名</button>
        <button @click="chargeAge">增长年龄</button>
        <button @click="chargeC1">修改第车1</button>
        <button @click="chargeC2">修改第车2</button>
        <button @click="chargeCar">修改所有车</button>
        
    </div>
    
</template>

<script setup lang="ts" name="Person">
    import { watch, reactive } from 'vue';

    let person=reactive({
        name:'张三',
        age:18,
        car:{
            c1:'奔驰',
            c2:'宝马'
        }
    })

    function changeName(){
        person.name+='~';
    }
    function chargeAge(){
        person.age++;
    }
    function chargePerson(){
        console.log('修改整个人');
        Object.assign(person,{name:'李四',age:30});
        
    }
    function chargeC1(){
        person.car.c1='奥迪';
    }
    function chargeC2(){
        person.car.c2='保时捷';

    }
    function chargeCar(){
        person.car={c1:'奥拓',c2:'奥德赛'};
    }

    //情况四：监视【reactive】定义的【对象类型】数据中的具体属性，且该属性为基本类型
    // 第一个参数：监控对象因为是一个属性，所以要写成函数形式
    watch(()=>person.name,(newValue,oldValue)=>{
        console.log('person.name变化了',newValue,oldValue);
    })
    // 监视【reactive】定义的【对象类型】数据中的具体属性，如果属性是对象类型，则最好写成函数式
    // 若是对象，监控的是地址值，如果要监控对象内部，则要写函数式，并且要加深度监视
    watch(()=>person.car,(newValue,oldValue)=>{
        console.log('person.car变化了',newValue,oldValue);
    },{deep:true})
   
</script>

<style scoped>
    .subDiv{
        color:blue;
        background-color:rgb(210, 205, 205);
        width: 770px;
        height: 300px;
        font-size: 15px;
        font-weight: 800;
        position:absolute;
        top:100px;
        border-radius: 20px;
        /** text-align: center;  */
        padding-left: 30px;
        padding-top: 30px;
        }
    button{
        width: 100px;
        height: 30px;
        font-size: 15px;
        padding-right: 10px;
        }
    h1{
        font-size: 20px;
    }
    h2{
        font-size: 18px;
    }
</style>